<template>
	<view class="container">
		<scroll-view class="container_scroll" scroll-y="true" :scroll-top='swiperContentHeight' scroll-with-animation @scroll="scrollContainer">
			<view class="nav">
				<view class="content">
					<view class="user">
						<view>
							<view class="name">{{studioDetail.user&&studioDetail.user.nickName}}</view>
							<view class="user_studio" @tap="goUrl">
								<image :src="url+'icon-93.png'" mode=""></image>
								<text>{{studioDetail.studio.name}}</text>
								<uni-icons type="right" :color="'#5C5E5E'" :size="14" ></uni-icons>
							</view>
						</view>
						<image :src="studioDetail.user.avatar"></image>
					</view>
					<view class="jianjie" >
						<image v-if="studioDetail.user.petsitterIntroduce" :src="url+'icon-94.png'" mode=""></image>
						<text>{{studioDetail.user.petsitterIntroduce}}</text>
					</view>
					<image class="list" :src="url + 'icon-104.png'" mode=""></image>
				</view>
			</view>
			<view class="function">
				<view class="function_nav">
					<view :class="{ active: current == 0 }" @click="changeCurrent(0)">
						<text>服务</text>
						<image :src="url + 'icon-101.png'"></image>
					</view>
					<view :class="{ active: current == 1 }" @click="changeCurrent(1)">
						<text>日常</text>
						<image :src="url + 'icon-101.png'"></image>
					</view>
					<view :class="{ active: current == 2 }" @click="changeCurrent(2)">
						<text>评价</text>
						<image :src="url + 'icon-101.png'"></image>
					</view>
				</view>
				<view class="service productBox0">
					<serviceItem v-if="serviceList.length!=0" :list='serviceList' :userId='userId'></serviceItem>
				</view>
				<view class="dailyService team productBox1">
					<view class="team_title">
						<view class="name">服务日常<text>({{ teamListTotal.serviceDailyCount }})</text>
						</view>
						<view class="seeTo" v-if="teamListTotal.serviceDailyCount" @tap="toDailyService">
							<text>查看全部</text>
							<uni-icons type="right" :color="'#1A1A1A'" :size="20"></uni-icons>
						</view>
					</view>
					<dailyServiceItem v-if="dailyService.length!=0" :list='dailyService'></dailyServiceItem>
					<loadMore v-else :status="'empty'" />
				</view>
				<view class="serviceEvaluation team productBox2">
					<view class="team_title">
						<view class="name">
							服务评价
							<text>({{ evaluateListTotal }})</text>
						</view>
						<view class="seeTo" @tap="toEvaluate" v-if="evaluateList.length!=0">
							<text>查看全部</text>
							<uni-icons
								type="right"
								:color="'#1A1A1A'"
								:size="20"
							></uni-icons>
						</view>
					</view>
					<evaluateItem v-if="evaluateList.length!=0" :list="evaluateList"></evaluateItem>
					<loadMore v-else :status="'empty'" :text="'暂时还没有服务评价'" />
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view @click="onlineConsultation">在线咨询</view>
			<view @tap="scrollFu">预约下单</view>
		</view>
		<!-- <image class="share" :src="url+'icon-87.png'" mode=""></image> -->
	</view>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import api from '@/api'
import BigNumber from 'bignumber.js'
import { useUserStoreToRefs } from '@/store/useUserStore'
import { onShow, onLoad ,onShareAppMessage, onShareTimeline} from '@dcloudio/uni-app'
import evaluateItem from '../components/evaluate-item/index.vue'
import dailyServiceItem from '../components/dailyService-item/index.vue'
import serviceItem from '../components/service-item/index.vue'
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const { shareRefereeId,userInfo } = useUserStoreToRefs()
import configs from '@/config'
onShareAppMessage(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${userId.value || ''}&data2=${studioId.value}&type=4`
	return {
		title: "",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: ""
	}
})
onShareTimeline(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${userId.value || ''}&data2=${studioId.value}&type=4`
	return {
		title: "",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: ""
	}
})


onLoad(async (e) => {
	studioId.value = e.studioId
	userId.value = e.userId
	await getDetails()
})

const studioId = ref<number>(0) //工作室id
const userId = ref<number>(0) //个人id
const studioDetail = ref<studioDetailType>({
	name: '',
	introduce: '',
	avatar: '',
	realDistance: '',
	province: '',
	city: '',
	area: '',
	address: '',
	distance: '',
	user:{},
	studio:{}
}) // 工作室详情数据
//获取工作室详情
const getDetails = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/getUserDetail`,
		data: {
			studioId: studioId.value,
			userId:userId.value
		}
	})
	if (res) {
		studioDetail.value = res.data
		studioDetail.value.distance =
			Number(res.data.realDistance) >= 1000
				? new BigNumber(res.data.realDistance)
						.div(1000)
						.toNumber()
						.toFixed(2) + 'km'
				: res.data.realDistance + 'm'
		await getStudioServiceList()
		await getEvaluateListList()
		await getTeamList()
		await getAllCount()
		await getOrderServiceSaily()
		await nextTick(()=>{
			 getHeightArr()
		})
	}
}

//获取服务列表
const serviceList = ref<serviceListType[]>([]) //服务列表
const getStudioServiceList = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/goods/studio-goods/getGoodsByStudioId/${studioId.value}`,
		data:{
			flag:1,
			userId:userId.value
		}
	})
	if (res) {
		serviceList.value = res.data
	}
}

//获取陪宠师团队列表
const teamList = ref<teamListType[]>([]) //服务列表
const teamListTotal = ref<{ teamCount: string; serviceDailyCount: string }>({
	teamCount: '',
	serviceDailyCount: ''
}) //陪宠师数量
const getTeamList = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/homePage`,
		data: {
			studioId: studioId.value
		}
	})
	if (res) {
		teamList.value = res.data
	}
}
//获取陪宠师数量
const getAllCount = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/getAllCount`,
		data: {
			studioId: studioId.value,
			userId:userId.value
		}
	})
	if (res) {
		teamListTotal.value = res.data
	}
}

const dailyService = ref([]) //服务日常数据列表
//获取服务日常
const getOrderServiceSaily = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/order-service-daily/homePage`,
		data: {
			studioId: studioId.value,
			userId:userId.value
		}
	})
	if (res) {
		dailyService.value = res.data
	}
}
//跳转全部陪宠师
const toDailyService = () => {
	uni.navigateTo({
		url: '/pages/studio/dailyService/index?studioGoodsId=' + studioId.value + '&userId=' + userId.value
	})
}
//去日常详情
const toDailyServiceDetail = (id: string) => {
	uni.navigateTo({
		url: '/pages/studio/dailyServiceDetail/index?id=' + id
	})
}
//返回工作室主页
const goUrl = (id: string) => {
	uni.reLaunch({
		url: '/pages/studio/index/index?id=' + studioId.value
	})
}
//获取评论列表
const evaluateList = ref<evaluateListType[]>([]) //评论列表
const evaluateListTotal = ref(0)
const getEvaluateListList = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/order/assess/page`,
		data: {
			page: 1,
			limit: 6,
			studioId: studioId.value,
			petsitterUserId:userId.value
		}
	})
	if (res) {
		evaluateList.value = res.data.records
		evaluateListTotal.value = res.data.total
	}
}
//跳转评论列表
const toEvaluate = () => {
	uni.navigateTo({
		url: '/pages/studio/serviceEvaluation/index?studioId=' + studioId.value + '&userId=' + userId.value
	})
}
//跳转在线咨询
const onlineConsultation = () =>{
	if(!userInfo.value){
		uni.showToast({
			icon: 'none',
			title: '登录后即可咨询'
		});
	}else{
		uni.navigateTo({
			url: `/pages/im/message/index?id=${userId.value}&username=${studioDetail.value.user.nickName}&avatar=${studioDetail.value.user.avatar}`
		})		
	}
	
}
//跳转服务tab
const old = ref({scrollTop:0})
const scrollFu = ()=>{
	// changeCurrent(0)
	swiperContentHeight.value = old.value.scrollTop
	nextTick(()=> {
		changeCurrent(0)
	});
}
const current = ref<number>(0) //tab滑块索引
//点击tab
const changeCurrent = (index: number) => {
	current.value = index
	swiperContentHeight.value =  heightArr.value[index]
}

const dailyServiceCurrent = ref<number>(0) //服务日常轮播图

const swiperContentHeight = ref<number>(0)
const heightArr = ref([])

const getHeightArr = async () =>{
	heightArr.value = []
	for(let i=0;i<3;i++){
		computedSwiperHeight(i)
	}
}
//页面滚动高度
const scrollContainer = (e)=>{
	let scrollTop = e.detail.scrollTop + 80
	let arr = [...heightArr.value,scrollTop]
	arr.sort(function(a,b){
		return a-b
	})
	if(arr.indexOf(scrollTop)>=1){
		current.value = arr.indexOf(scrollTop)-1
	}
	
}
// 商品列表高度计算
const computedSwiperHeight = async (num) => {
	nextTick(() => {
		let selectQuery = `.productBox${num}`
				
		// #ifdef MP-WEIXIN
		const query = wx.createSelectorQuery()
		// #endif
		// #ifndef MP-WEIXIN
		const query = tt.createSelectorQuery()
		// #endif
		query.select(selectQuery).boundingClientRect()
		query.selectViewport().scrollOffset()
		query.exec((res) => {
			heightArr.value[num] = res[0].top - 100
		})
	})
}
//工作室详情数据
interface studioDetailType {
	name: string
	introduce: string
	avatar: string
	realDistance: string
	province: string
	city: string
	area: string
	address: string
	distance: string
	user:any
	studio:any
}
//服务列表数据定义
interface serviceListType {
	id: string
	thumPic: string
	name: string
	description: string
	price: string
	goods: any
	petRangeMarkUp: any
	petNumMarkUp: any
}
//陪宠师团队列表
interface teamListType {
	id: string
	nickName: string
	avatar: string
	petsitterIntroduce: string
	user: any
}
//评论列表数据定义
interface evaluateListType {
	userAvatar: string
	nickName: string
	createTime: string
	id: string
	count: number
	createTimeStr: string
	content: string
	ifAnonymous: number
}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	line-height: 1;
	padding-bottom: calc(110rpx + var(--safe-area-bottom));
	background: linear-gradient(
		180deg,
		rgba(249, 246, 246, 0) 0%,
		#f9f6f6 100%
	);
	.container_scroll{
		height: calc(100vh - var(--safe-area-bottom) - 104rpx);
	}
}
.nav {
	width: 100%;
	padding: 32rpx 32rpx 0;
	box-sizing: border-box;
	background: url(https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-106.png) no-repeat;
	// background-size: 100% 100%;
	background-size: 100% 100%;
	.content {
		width: 100%;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 32rpx 32rpx 24rpx;
		background: linear-gradient( 180deg, #FFFFFF 0%,#FFFFFF 50%, #FCE1E9 100%);
		box-shadow: 0px 0px 16px 0px rgba(159,77,112,0.08);
		.user{
			width: 100%;
			box-sizing: border-box;
			>view{
				width: calc(100% - 180rpx);
				color: #5C5E5E;
				font-size: 28rpx;
				.name{
					width: 100%;
					color: #1B2120;
					font-size: 40rpx;
					font-weight: bold;
					line-height: 48rpx;
					margin-bottom: 26rpx;
				}
				.user_studio{
					@include flex(center);
				}
				image{
					width: 32rpx;
					height: 32rpx;
				}
				text{
					margin:0 8rpx;
				}
			}
			@include flex(center,space-between);
			image{
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
			}
		}
		.jianjie{
			color: #7C807F;
			font-size: 26rpx;
			line-height: 48rpx;
			margin:24rpx 0 40rpx;
			image{
				width: 60rpx;
				height: 36rpx;
				vertical-align: middle;
				margin-right: 12rpx;
			}
			text{
				word-break:break-all;
				word-wrap:break-word;
			}
		}
		.list {
			width: 100%;
			height: 48rpx;
			background: rgba(255,255,255,0.35);
			border-radius: 24rpx;
			border: 1px solid #FFFFFF;
		}
	}
}
.function {
	padding-bottom: 60rpx;
	.function_nav {
		position: sticky;
		top: 0;
		z-index: 999;
		padding: 40rpx 0 48rpx;
		@include flex(center, center);
		background: linear-gradient(
			180deg,
			rgba(249, 246, 246) 0%,
			#f9f6f6 100%
		);
		// background: #fff;
		view {
			height: 54rpx;
			color: #5c5e5e;
			font-size: 30rpx;
			margin-right: 90rpx;
			@include flex(center, center);
			flex-direction: column;
			position: relative;
			&:last-child {
				margin-right: 0;
			}
			image {
				width: 40rpx;
				height: 14rpx;
				margin-top: 4rpx;
				position: absolute;
				display: none;
				bottom: -18rpx;
				left: 50%;
				margin-left: -20rpx;
			}
		}
		.active {
			color: #1b2120;
			font-size: 40rpx;
			font-weight: bold;
			image {
				display: block;
			}
		}
	}
}
.service {
	padding: 0 32rpx;
	box-sizing: border-box;
}
.team {
	width: 100%;
	padding: 0 32rpx;
	margin-top: 80rpx;
	box-sizing: border-box;
	.team_title {
		@include flex(center, space-between);
		.name {
			font-weight: bold;
			font-size: 40rpx;
			color: #202020;
			text {
				color: #8e8c8c;
				font-size: 28rpx;
				font-weight: 400;
			}
		}
		.seeTo {
			color: #202020;
			font-size: 14px;
			@include flex(center);
			text {
				margin-left: 4rpx;
			}
		}
	}
	.banner {
		width: 100%;
		height: 230rpx;
		margin: 48rpx 0;
		border-radius: 24rpx;
	}
	.team_scroll {
		width: 100%;
		.list {
			width: 100%;
			@include flex(center);
			.item {
				width: 268rpx;
				height: 334rpx;
				padding: 32rpx 24rpx;
				margin-right: 16rpx;
				border-radius: 24rpx;
				box-sizing: border-box;
				background-color: #fff;
				@include flex(center, center);
				flex-direction: column;
				image {
					width: 136rpx;
					height: 136rpx;
					border-radius: 50%;
				}
				.name {
					width: 100%;
					color: #1b2120;
					font-size: 30rpx;
					font-weight: bold;
					margin: 24rpx 0;
				}
				.describe {
					color: #808080;
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}
		}
	}
}
.dailyService {
	padding-left: 32rpx;
	box-sizing: border-box;
	.team_title {
		padding-right: 32rpx;
		box-sizing: border-box;
	}
}
.serviceEvaluation {
	.team_title {
		margin-bottom: 48rpx;
	}
}
.footer{
	position: fixed;
	bottom: 0;left: 0;
	width: 100vw;
	padding:8rpx 24rpx;
	padding-bottom: calc(var(--safe-area-bottom) + 4rpx);
	box-sizing: border-box;
	background-color: #ffffff;
	@include flex(center,space-between);
	view{
		width: 344rpx;
		height: 88rpx;
		color: #FF6084;
		font-size: 28rpx;
		border-radius: 44rpx;
		box-sizing: border-box;
		@include flex(center,center);
		border: 2rpx solid #FF6084;
		&:last-child{
			color: #FFFFFF;
			font-size: 28rpx;
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		}
	}
}
::v-deep .loading-empty{
	>image{
		margin: 140rpx auto 30rpx !important;
	}
	>view{
		margin-bottom: 80rpx;
	}
}
.share{
	width: 132rpx;
	height: 64rpx;
	position: fixed;
	top: 16rpx;right: 0;
}
</style>
